<template>
  <div>
    <el-card>
      <CategoryList
        :disabled="showStatus !== ShowStatus.SPU_LIST"></CategoryList>
    </el-card>
    <el-card style="margin-top: 10px">
      <SpuList
        v-if="showStatus === ShowStatus.SPU_LIST"
        @setShowStatus="setShowStatus"
        @setSpu="setSpu" />
      <SpuForm
        v-else-if="showStatus === ShowStatus.SPU_FORM"
        @setShowStatus="setShowStatus"
        :spu="spu" />
      <SkuForm v-else @setShowStatus="setShowStatus" :spu="spu" />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { spuModel } from "@/api/product/model/spuModel";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import SpuList from "./components/SpuList.vue";
import SpuForm from "./components/SpuForm.vue";
import SkuForm from "./components/SkuForm.vue";

import { ref } from "vue";
import { ShowStatus } from "./types";

// 标识显示个组件的变量
const showStatus = ref<ShowStatus>(ShowStatus.SPU_LIST);

// 更新showStatus的函数
const setShowStatus = (status: ShowStatus) => {
  showStatus.value = status;
};

// 定义一个数据 获取SpuList的数据
const spu = ref<spuModel>({
  category3Id: undefined,
  description: "",
  spuName: "",
  tmId: undefined,
  spuImageList: [],
  spuSaleAttrList: [],
});

// 操作数据的方法
const setSpu = (NewSpu: spuModel) => {
  spu.value = NewSpu;
};
</script>

<style scoped lang="scss"></style>
